<template>
  <div :class="!isShow?'location':'location isShow'">
      <myHead title="选择当前学校"></myHead>
      <section>
          <div class="search">
            <img src="../../../static/img/dingweisousuo.png" alt="">
            <input type="text" placeholder="请输入你要搜索的学校名称">
          </div>
      </section>
      <div class="dq_school">
          <div class="dq_school_top">当前学校</div>
          <div class="dq_school_info">
              <p>{{current}}</p>
              <p><span>重新定位</span><img src="../../../static/img/shuaxintubiao.png" alt=""></p>
          </div>
      </div>
      <div class="fj_school">
        <div class="dq_school_top">附近的学校</div>
        <div class="fj_school_item">
            <p class="fj_noSchool" v-show="isShow">没有更多了</p>
            <p v-show="!isShow" class="fj_school_itemBox" v-for="x in schoolList" @click="schoolInfo(x)">{{x}}</p>
        </div>
      </div>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";
  export default {
    name: "location",
    components:{
      myHead
    },
    data() {
      return {
        schoolList:['陕西学前师范大学','陕西师范大学','西安工业大学','陕西音乐学院','陕西学前师范大学'],
        current:'陕西学前师范大学',
        isShow:false
      }
    },
    methods:{
      schoolInfo(name){
          this.current = name;
      }
    }
  }
</script>

<style scoped>
  .location {
    width: 100%;
    box-sizing: border-box;
    min-height: 6.67rem;
    padding-top: .5rem;
  }
  .location section {
    padding: .12rem .15rem;
    background-color: #F5F5F5;
  }
  .search {
    width:3.47rem;
    height:.36rem;
    background:rgba(255,255,255,1);
    border-radius:.16rem;
    margin: 0 auto;
    box-sizing: border-box;
    padding-left: .22rem;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .search>img {
    width: .16rem;
    height: .16rem;
    margin-right: .08rem;
  }
  .search>input {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:400;
    outline: none;
    border: none;
    width: 100%;
  }

  .dq_school,.fj_school {
    background-color: #F5F5F5;
  }
  .dq_school_top {
    height: .5rem;
    line-height: .5rem;
    text-align: left;
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #333333;
    padding: 0 .15rem;
  }
  .dq_school_info {
    padding: 0 .15rem;
    height: .5rem;
    background-color: #FFFFFF;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .dq_school_info>p:nth-child(1) {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #333333;
  }
  .dq_school_info>p:nth-child(2)>span {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #FF7814;
  }
  .dq_school_info>p:nth-child(2) {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .dq_school_info>p:nth-child(2)>img {
    width: .13rem;
    height: .13rem;
    margin-left: .1rem;
  }
  .fj_school_item {
    background-color: #FFFFFF;
  }
  .fj_school_itemBox {
    box-sizing: border-box;
    padding-left: .15rem;
    border-bottom: .01rem solid #F6F6F6;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
    line-height: .5rem;
  }
  .fj_noSchool {
    height: .5rem;
    line-height: .5rem;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
    text-align: center;
  }
  .isShow {
    background-color: #F5F5F5 !important;
  }
</style>
